<template>
  <van-card v-for="user in userList" lazy-load="lazy-load"
      :desc="user.profile"
      :title="`${user.username}(${user.userAccount})`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain v-for="tag in tags" type="danger" style="margin-right: 8px; margin-top: 8px">
        {{tag}}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini" @click="getUserInfo(user.email, user.phone, user.username)">联系我</van-button>
    </template>
  </van-card>
  <van-empty v-if="!userList||userList.length<1" description="搜索结果为空  "/>

</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Dialog, Toast} from "vant";
import qs from 'qs';

  const route = useRoute();
  const router = useRouter();

  const { tags } = route.query;

  const userList = ref([]);


  onMounted(async() => {
    const userListData = await myAxios.get('/user/search/tags', {
      params: {
        tagNameList: tags
      },
      paramsSerializer: params => {
        return qs.stringify(params, {indices: false})
      }
    }).then(function (response) {
          console.log('/user/search/tags success', response);
          Toast.success("请求成功");
          return response.data?.data;
        }).catch(function (error) {
          console.error('/user/search/tags error', error);
          Toast.fail("请求失败");
        });

    if (userListData) {
      userListData.forEach(user => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags); // 将用户的标签的Json格式转化为字符串
        }
      });
      userList.value = userListData;
    }
  });

  const getUserInfo = (email: string, phone: string, username: string) => {

    // router.push({
    //   path: '/user/info',
    //   query: {
    //     email: email,
    //     phone: phone,
    //   }
    // });
    Dialog.alert({
      title: username,
      message: '邮箱:' + email + '\n电话:' + phone,
      allowHtml: true
    })
  }


  const mockUser = {
    id: 123,
    username: 'yang',
    userAccount: '12345',
    avatarUrl: 'http://picture.treehole.fun/img/202206131029051.png',
    gender: 0,
    phone: '18539315470',
    email: 'yang@qq.com',
    tags: ['java', '大一', 'python'],
    profile: '红红火火恍恍惚惚红红火火恍恍惚惚回家哈哈哈哈哈哈',
    createTime: new Date(),
  }


</script>

<style scoped>

</style>
